<script setup lang="ts">
import { reactive, ref } from 'vue'
import UploadComponent from '@/components/upload/UploadComponent.vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { userAddApi } from '@/api/user'
import router from '@/router'
const ruleFormRef = ref<FormInstance>()

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 8, message: '长度范围为 3 到 8 个字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 12, message: '长度范围为 5 到 12 个字符', trigger: 'blur' },
    ],
    role: [
        { required: true, message: '请选择权限', trigger: 'blur' },
    ],
})

interface UserForm {
    [key: string]: any
    username: string
    password: string
    role: number
    introduction: string
    avatar: string
    gender: number
    file: Object
}

const userForm: UserForm = reactive(
    {
        username: '',
        password: '',
        role: 0,
        introduction: '暂无简介',
        avatar: '',
        gender: 0,
        file: {}
    }
)

const handleChange = (file: File) => {
    userForm.avatar = URL.createObjectURL(file)
    userForm.file = file
}

const onSubmit = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            const params = new FormData()
            for (const i in userForm) {
                params.append(i, userForm[i])
            }
            userAddApi(params).then((res: { [key: string]: any }) => {
                console.log("userAdd接收结果");
                console.log(res.data);
                ElMessage({
                    type: res.data.code === 200 ? 'success' : 'error',
                    message: `${res.data.msg}`
                })
                router.push({
                    path: '/user-manage/userList'
                })
            })
        }
    })
}
</script>

<template>
    <div id="userAdd">
        <img class="userAddImg" src="@/assets/userAdd.png">
        <el-form ref="ruleFormRef" :model="userForm" label-width="auto" label-position="left" size="large" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="userForm.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="权限" prop="role">
                <el-select v-model="userForm.role" placeholder="请选择权限">
                    <el-option label="编辑" :value="0" />
                    <el-option label="管理员" :value="1" />
                </el-select>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-select v-model="userForm.gender" placeholder="请选择性别">
                    <el-option label="男" :value="1" />
                    <el-option label="女" :value="2" />
                    <el-option label="未知" :value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="个人简介" prop="introduction">
                <el-input v-model="userForm.introduction" type="textarea" :autosize="{ minRows: 7, maxRows: 10 }" />
            </el-form-item>

            <el-form-item label="头像" prop="avatar">
                <UploadComponent :avatar="userForm.avatar" @fileChange="handleChange" />
            </el-form-item>
            <el-form-item>
                <el-button class="submitBtn" type="primary" plain @click="onSubmit">添加用户</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang='less' scoped>
#userAdd {
    position: relative;

    .userAddImg {
        z-index: 1;
        position: absolute;
        right: 3%;
        width: 550px;
    }

    .upload-demo {
        width: 500px;
    }

    .submitBtn {
        margin-left: 5%;
        width: 800px;
    }

    .el-input,
    .el-select {
        margin-bottom: 20px;
        width: 55%;
    }

    .el-textarea {
        width: 62%;

    }
}
</style>